<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>动漫分区</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap/css/style.css">
    <link rel="stylesheet" href="../bootstrap/css/font-awesome(1).css">
    <link rel="stylesheet" href="../bootstrap/css/nprogress.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/program.css">
    <style>
        #draw-border {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            background: #eee;
        }
        #draw-border1{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            background: #eee;
        }

        .four {
            border: 0;
            background: none;
            text-transform: uppercase;
            color: #4361ee;
            font-weight: bold;
            position: relative;
            outline: none;
            padding: 11px 45px;
            box-sizing: border-box;
        }

        .four::before, .four::after {
            box-sizing: inherit;
            position: absolute;
            content: '';
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }

        .four::after {
            bottom: 0;
            right: 0;
        }

        .four::before {
            top: 0;
            left: 0;
        }

        .four:hover::before, .four:hover::after {
            width: 100%;
            height: 100%;
        }

        .four:hover::before {
            border-top-color: #4361ee;
            border-right-color: #4361ee;
            transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
        }

        .four:hover::after {
            border-bottom-color: #4361ee;
            border-left-color: #4361ee;
            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <jsp:include page="./leftSidebar.jsp"></jsp:include>
        <div class="aside">
            <div class="widgets">
                <h4>搜索</h4>
                <div class="body search">
                    <form action="search.jsp">
                        <input type="text" class="keys" id="keys" placeholder="输入关键字">
                        <input type="button" class="btn" id="SearchBtn" value="搜索">
                    </form>
                </div>
            </div>
            <div class="widgets">
                <h4>随机推荐</h4>
                <ul class="body random">
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《满溢的水果挞将于2020年10月播出。</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="../uploads/right1.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《EX-ARM》于2021年1月10日播出</p>
                            <p class="reading">阅读(906)</p>
                            <div class="pic">
                                <img src="../uploads/right2.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">手游《Fate/Grand》配信5周年纪念动画PV公开</p>
                            <p class="reading">阅读(509)</p>
                            <div class="pic">
                                <img src="../uploads/right3.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">芳文社漫画改编动画《满溢的水果塔》追加声优</p>
                            <p class="reading">阅读(679)</p>
                            <div class="pic">
                                <img src="../uploads/right4.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《天使与龙的轮舞》将推出蓝光BOX。</p>
                            <p class="reading">阅读(889)</p>
                            <div class="pic">
                                <img src="../uploads/right5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="panel hots">
                <div class="row" style="height: 50px">
                    <div class="col-sm-4" style="height: 50px" >
                        <h3 style="margin-top: 0">番剧</h3>
                    </div>
                    <div class="col-sm-6" style="height: 50px">
                    </div>
                    <div class="col-sm-2" style="height: 50px">
                        <div id="draw-border">
                            <button class="four" id="drama">更多</button>
                        </div>
                    </div>
                </div>
                <ul>
                    <li>
                        <a href="video.jsp">
                            <img src="../uploads/hots1.jpg" alt="">
                            <span>请问您今天要来点兔子吗？BLOOM</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots2.jpg" alt="">
                            <span>在魔王城说晚安</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots3.jpg" alt="">
                            <span>进击的巨人第四季</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots4.jpg" alt="">
                            <span> one room第三季</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="panel hots">
                <div class="row" style="height: 50px">
                    <div class="col-sm-4" style="height: 50px">
                        <h3 style="margin-top: 0">玩家自制</h3>
                    </div>
                    <div class="col-sm-6" style="height: 50px">
                    </div>
                    <div class="col-sm-2"style="height: 50px">
                        <div id="draw-border1">
                            <button class="four" id="player">更多</button>
                        </div>
                    </div>
                </div>
                <ul>
                    <li>
                        <a href="video.jsp">
                            <img src="../uploads/hots1.jpg" alt="">
                            <span>请问您今天要来点兔子吗？BLOOM</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots2.jpg" alt="">
                            <span>在魔王城说晚安</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots3.jpg" alt="">
                            <span>进击的巨人第四季</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots4.jpg" alt="">
                            <span> one room第三季</span>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <script src="../bootstrap/js/jquery/jquery.js"></script>
    <script src="../bootstrap/js/nprogress/nprogress.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#SearchBtn').click(function () {
                var keys = $('#keys').val().trim();
                location.href = './search.do?action=page&name=' + keys;
            })
        })
    </script>
    <script type="text/javascript">
        $(function () {
            $("#player").click(function () {
                location.href ="player.jsp";
            })
            $("#drama").click(function () {
                location.href ="drama.jsp";
            })
        })
    </script>
</body>

</html>